<template>
    <div class="wp">
        <Top/>
        <Inswipe class="ban"/>
        <ul class="Slike SFOne">
            <li class="Sliketop">
                <i class="Sliketopline"></i>
                <span class="Slikew">{{lei[0]}}</span>
                <i class="Sliketopline"></i>
            </li>
        </ul>
        <ul class="Slikemain1 SFTwo">
            <li  v-for="(item,index) in category" :key="index">
                <img :src="item.src" alt="">
                <p class="SFThree">{{item.name}}</p>
            </li>
        </ul>
        



            <ul class="Slike">
                <li class="Sliketop">
                    <i class="Sliketopline"></i>
                    <span class="Slikew">{{lei[1]}}</span>
                    <i class="Sliketopline"></i>
                </li>
            </ul>
            <ul class="Slikemain sfone" >
                <li class="Smw" v-for="(item,index) in foods" :key="index">
                    <img class="hot" :src="src" alt="">
                        <p class="hotzi">爆品</p>
                        <div >
                            <img class="Smi" :src="item.src" alt="">
                        </div>
                        <div class="Smizi">
                            {{item.name}}
                        </div>
                        <div class="Sfred">
                            ￥{{item.money}}
                        </div>
                </li>
            </ul>
           
                
       
                
        <p class="Sfbot">亲，就这么多了</p>
        <Footer/>
    </div>
</template>

<script >
import Top from '../ma/Top';
import Inswipe from '../ma/Inswipe';
import Footer from '../ma/footer';


export default {
    name:'Food',
    components:{
        Top,
        Inswipe,
        Footer,
    },
    data(){
        return{
            tu:this.$store.state.tu,
            // 猜你喜欢
        like:this.$store.state.tuall,
        lei:['热销类目','爆品推荐'],
        category:[
            {
                name:'糖果',
                src:require('../../assets/user/food1.png')
            },
            {
                name:'膨化',
                src:require('../../assets/user/food2.png')
            },
            {
                name:'方便面',
                src:require('../../assets/user/food3.png')
            },
            {
                name:'巧克力',
                src:require('../../assets/user/food4.png')
            }
        ],
        src:require('../../assets/user/hot.png'),
        foods:[
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            },
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            },
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            }
        ]
        }
    }
}
</script>

<style scoped>
.ban {
    position: relative;
    margin: 15rem 0 2rem 0;
}
.wp {
    color: #585858;
    font-size: 2.4rem;
}
.SFOne {
    border-top: 1px solid #ccc;
    background: #fff;
    padding: 0 2rem;
}
.SFTwo {
    border-bottom: 1px solid #ccc;
    background: #fff;
    padding: 6.5rem 2rem 5.6rem 2rem;
}
.SFThree {
    color: #000;
    margin-top: 4rem;
}
.Sfone {
    background: #fff;
}
.Slike {
  background: #fff;
  font-size: 2.4rem;
  margin-top: 2rem;
  color: #4d4d4d;
}
.Slikes {
  background: #fff;
  font-size: 2.4rem;
  color: #4d4d4d;
}
.Str {
    background: #fff;
    height: 20rem;
}
.Sliketop {
    border-top: 1px solid #ccc;
  font-size: 3rem;
  padding: 1.2rem 0 2.5rem 0;
}
.Sliketopline {
  display: inline-block;
  width: 6rem;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.Slikew {
  display: inline-block;
  margin: 0 1.5rem;
}
.Slikemain1 {
  display: flex;
  justify-content: space-evenly;
  /* padding: 2.5rem 0; */
  flex-wrap: wrap;
}
.Sjiazai {
  color: #808080;
}
.Smw {
    width: 32.8rem;
    height: 23.8rem;
    border: 0.1rem solid #ccc;
    position: relative;
    margin-bottom: 2rem;
}
.Smi {
    height: 10.5rem;
    margin: 3.7rem 0 2.2rem 2rem;
    color: #6e6e6e;
}
.hot {
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 7.6rem;
}
.hotzi {
    writing-mode: vertical-rl;
    position: absolute;
    top: 0.4rem;
    left: 0.3rem;
    color: #fff;
}
.start {
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
}
.time {
    text-align: left;
    font-size: 1.8rem;
}
.time span {
    color: #e96466;
}
.Sjiazai {
  color: #808080;
}
.Str {
    font-size: 2.4rem;
}
.Slikemain {
  display: flex;
  justify-content: space-evenly;
  padding: 2.5rem 0;
  flex-wrap: wrap;
}
.sfone {
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.Sfred {
    color: #e53e42;
}
.Sfbot {
    height: 12.2rem;
    padding-top: 1rem;
    font-size: 1.8rem;
    color: #808080;
}
</style>